
import { useRoutes } from 'react-router-dom';
import { Layout } from 'antd'
import {
  QuestionCircleOutlined,
} from '@ant-design/icons';
import router from "./routes"
import { useState } from 'react'
import SideMenu from './components/SideMenu/SideMenu'
const { Footer, Sider, Content } = Layout;

const contentStyle = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#1A1A1A',
  backgroundColor: '#eee',
};
const siderStyle = {
  textAlign: 'center',
  color: '#1A1A1A',
  backgroundColor: '#ffffff',
  position: 'fixed',
  minHeight: '100%',
  zIndex: '99'
};
const footerStyle = {
  textAlign: 'center',
  color: '#1A1A1A',
  backgroundColor: '#eee',
  zIndex: '99'
};

function App() {
  const outlet = useRoutes(router)
  const [collapsed, setCollapsed] = useState(true)
  return (
    <div className="App">
      <Layout style={{ minHeight: '100%' }}>
        <Sider style={siderStyle} trigger={null} collapsible collapsed={collapsed} ><SideMenu /></Sider>
        <Layout>
          <Content className='appBg' style={contentStyle}>
            {outlet}
            <Footer style={footerStyle}>自定义底部</Footer>
          </Content>
          
        </Layout>
        <Sider style={siderStyle} trigger={null} collapsible collapsed={collapsed} ><SideMenu /></Sider>
      </Layout>
    </div>
  )
}

export default App
